//公告管理
<template>
  <div class="announcement_box">
    <avue-crud
      :data="data"
      :option="option"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      v-model:page="page"
      v-model:search="search"
      @on-load="onLoad"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
    </avue-crud>
  </div>
</template>
  <script >
import axios from "axios";
export default {
  data() {
    return {
      page: {
        pageSize: 10,
      },
      current: 1,
      data: [],
      option: {
        searchMenuSpan: 4,
        border: true,
        headerAlign: "center",
        align: "center",
        index: true,
        indexLabel: "序号",
        menuType: "button",
        columnBtn:false,
        column: [
          {
            label: "公告内容",
            prop: "title",
            search: true,
          },
          {
            label: "状态",
            prop: "status",
            search: true,
            type: "select",
            html: true,
            formatter: (val) => {
              return val.status == 1
                ? "<span class='yes'>公布</span>"
                : "<span class='isyes'>撤销</span>";
            },
            dicData: [
              {
                label: "公布",
                value: 1,
              },
              {
                label: "撤销",
                value: 0,
              },
            ],
          },
          {
            label: "是否置顶",
            prop: "isTop",
            search: true,
            type: "select",
            html: true,
            formatter: (val) => {
              return val.isTop == 1
                ? "<span class='yes'>是</span>"
                : "<span class='yes'>否</span>";
            },
            dicData: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
          },
        ],
      },
    };
  },
  
  mounted() {
    this.getAnlist();
    
  },
  methods: {
    refreshChange() {
      this.$message.success("刷新回调");
    },
    //新增
    rowSave(form, done, loading) {
      form.id = new Date().getTime();

      setTimeout(() => {
        loading();
      }, 1000);
      axios({
          method:"POST",
          url:"http://111.67.198.176:8111/shop/notice",
          data:{
            id:form.id,
            title:form.title,
            status:form.status,
            isTop:form.isTop,
            content: "<p>咯就hi顾宇峰已发给</p>",
            url: null,
            t: 1669182108164,
          },
          headers:{
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          }
        }), 
        done();
        this.$message.success('操作成功');
      setTimeout(() => {
        this.getAnlist()
       
      }, 1000);
    },
    //删除
    rowDel(form, index, done) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method:"DELETE",
            url:`http://111.67.198.176:8111/shop/notice/${form.id}`,
            headers:{
              Authorization: "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J"
            }
          }).then(res=>{
            console.log(res,"delete");
          })
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(()=>{
            this.getAnlist()
          },1000)
          
        })
        .catch(() => {});
    },
    //更新
    rowUpdate(form, index, done, loading) {
      setTimeout(() => {
        loading();
      }, 1000);
      axios({
        method:"PUT",
        url:"http://111.67.198.176:8111/shop/notice",
        data:{
          content: "<p>咯就hi顾宇峰已发给</p>",
          id:form.id,
          isTop: form.isTop,
          publishTime: "2022-11-23 13:55:42",
          shopId: form.shopId,
          status: form.status,
          t: 1669183087666,
          title: form.title,
          updateTime: "2022-11-23 13:55:42",
        },
        headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
      })
      done();
      
      setTimeout(() => {
        this.$message.success(
          '修改成功'
        );
        this.getAnlist();
      }, 2000);
    },
    //清空input
    resetChange (item) {
      this.$message.success('清空回调')
    },
    //搜索
    searchChange (params, done) {
      this.$message.success('2s后关闭锁定')
      setTimeout(() => {
        done(params);
        axios({
          method:"get",
          url:`http://111.67.198.176:8111/shop/notice/page?t=1669104248541&current=1&size=10&title=${params.title}&status=${params.status}&isTop=${params.isTop}`,
          headers:{
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          }
        }).then(res=>{
          console.log(res,"search");
          this.data=res.data.records;
        })
        this.$message.success(JSON.stringify(params));
      }, 2000)

    },
    //获取总数据
    getAnlist() {
      axios({
        method: "get",
        url: `http://111.67.198.176:8111/shop/notice/page?t=1668945511175&current=${this.current}&size=10`,
        headers: {
          Authorization:
            "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        },
      }).then((res) => {
        console.log(res);
        this.data = res.data.records;
        localStorage.setItem("dataLength", JSON.stringify(res.data.total));
      });
    },
    onLoad(page) {
      //模拟分页
      let listLength = localStorage.getItem("dataLength");
      this.page.total = Number(listLength);
      this.current = this.page.currentPage;
      this.getAnlist();
    },
  },
};
</script>
  <style lang="scss">
.announcement_box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.yes {
  background-color: rgba(2, 161, 233, 0.1);
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #02a1e9;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(2, 161, 233, 0.2);
  white-space: nowrap;
}
.isyes{
  background-color: rgba(245,108,108,.1);
    border-color: rgba(245,108,108,.2);
    color: #f56c6c;
    padding: 0 10px;
  height: 100px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(233, 91, 2, 0.2);
  white-space: nowrap;
}
</style>